@import "m_reset.scss";
@import url(http://at.alicdn.com/t/c/font_3598568_m6681dzp56.css);
@function getvw($w) {
  @return ($w/750) * 100 + vw;
}
.warp {
  header {
    nav {
      display: flex;
      padding: getvw(17) getvw(23) getvw(9) getvw(23);
      align-items: center;
      justify-content: space-between;
      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: getvw(123);
        height: getvw(57);
        border: 1px solid orange;
        border-radius: getvw(20);
        position: relative;

        h4 {
          padding: 0 getvw(25);
          position: absolute;
        }
      }
      .area {
        position: relative;
        select {
          width: getvw(160);
          height: getvw(55);
          border: 1px solid #ff9344;
          appearance: none;
          padding-left: getvw(14);
        }
        i {
          font-size: getvw(30);
          color: #ff9344;
          position: absolute;
          right: getvw(11);
          top: 50%;
          transform: translateY(-50%);
          pointer-events: none;
        }
      }
    }
    .banner {
      margin-top: getvw(10);
      display: flex;
      justify-content: center;
      .search {
        width: getvw(266);
        position: relative;
        input {
          width: getvw(265);
          height: getvw(50);
          border: 1px solid #ff9344;
          border-radius: getvw(50);
          font-size: getvw(24);
          padding: 0 getvw(25);
        }
        i {
          font-size: getvw(30);
          color: #ff9344;
          position: absolute;
          right: getvw(24);
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .son {
      margin-top: getvw(10);
      .box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      }
      .box1 {
        display: flex;
        width: getvw(512);
        height: getvw(66);
        margin: getvw(10) auto;
        .box2 {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: getvw(10);
          width: getvw(125);
          height: getvw(64);
          background-color: gray;
        }
      }
      .box3 {
        display: flex;
        width: getvw(512);
        height: getvw(66);
        margin: 0 auto;
        .box2 {
          display: flex;
          justify-content: center;
          align-items: center;
          width: getvw(125);
          height: getvw(64);
          background-color: gray;
          margin-left: getvw(10);
          p {
            text-align: center;
          }
        }
      }
    }
  }
  main {
    .boox {
      margin-top: getvw(30);
      .top1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: getvw(708);
        height: getvw(49);
        margin: 0 auto;
      }
      .top2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(40);
          font-weight: normal;
          color: #ff9344;
          padding-right: getvw(10);
        }
        h4 {
          display: flex;
          align-items: center;
          width: getvw(140);
          height: getvw(30);
        }
      }
      .top3 {
        display: flex;
        align-items: center;
        i {
          width: getvw(25);
          height: getvw(26);
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
      .blue {
        display: flex;
        margin-left: getvw(10);
        margin-top: getvw(20);
        .blue1 {
          img {
            width: getvw(280);
            height: getvw(352);
          }
        }
        .blue2 {
          .blue3 {
            margin-left: getvw(10);
            margin-right: getvw(20);

            .logo {
              img {
                width: getvw(420);
                height: getvw(146);
              }
            }
          }

          .blue4 {
            display: flex;

            .logo {
              padding: getvw(10);
              img {
                width: getvw(200);
                height: getvw(197);
              }
            }
          }
        }
      }
    }
    .boox2 {
      margin-top: getvw(50);
      .top1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: getvw(708);
        height: getvw(49);
        margin: 0 auto;
      }
      .top2 {
        display: flex;
        align-items: center;
        i {
          font-size: getvw(40);
          font-weight: normal;
          color: #ff9344;
          padding-right: getvw(10);
        }
        h4 {
          display: flex;
          align-items: center;
          width: getvw(140);
          height: getvw(30);
        }
      }
      .top3 {
        display: flex;
        align-items: center;
        i {
          width: getvw(25);
          height: getvw(26);
          color: #ff9344;
          padding-left: getvw(10);
        }
      }
    }
    .top4 {
      display: flex;
      justify-content: space-between;
      margin-top: getvw(10);

      .sun {
        margin-right: getvw(10);
        margin-left: getvw(10);
        img {
          width: getvw(220);
          height: getvw(200);
        }
      }
    }
  }
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-top: getvw(50);
    background-color: aliceblue;
    .foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: getvw(708);
      height: getvw(120);
      margin-left: getvw(20);
      .font1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        p{
          a{
            color: black;
          }
        }
      }
      i {
        font-size: getvw(40);
        color: #ff9344;
      }
    }
  }
}
